import {ScrollView, StyleSheet, Text, TouchableOpacity, View, Alert} from "react-native";
import {Image} from "expo-image";
import { getWrapProfileCardByRequest } from "@/services/registerCommumity"
import {showToast} from "@/utils/rootToast";
import Empty from "@/components/empty";

const memberComponent = function ({ list, isApply, communityId, show, hide }) {
    // const [isApply, setApply] = useState(true);

    const wrapCard = function (memberUid) {
        Alert.alert(
            '交换群名片',
            '你确定要执行此操作吗？',
            [
                {
                    text: '取消',
                    onPress: () => console.log('取消操作'),
                    style: 'cancel', // 取消按钮的样式
                },
                {
                    text: '确定',
                    onPress: () => {
                        const data = {
                            communityId,
                            memberUid
                        };
                        console.log('data', data);
                        getWrapProfileCardByRequest(data)
                            .then(res => {
                                showToast("申请交换成功！")
                                console.log('res', res);
                            })
                            .catch(err => {
                                console.log('err', err);
                            })
                    },
                    style: 'destructive', // 确认按钮的样式
                },
            ],
            { cancelable: false } // 设置为 true 时，点击外部区域会关闭弹窗
        );
    };

    return (
        <View style={{ flex: 1, }}>
           <ScrollView style={{ flex: 1, }}>
               {
                   !isApply && (
                       <View style={styles.memberList}>
                           {
                               list?.map((item: any, index: number) => {
                                   return (
                                       <TouchableOpacity>
                                           <View style={styles.memberItem}>
                                               <View style={styles.avator}>
                                                   <Image source={{ uri: item?.avatarUrl }} style={{ width: "100%", height: "100%" }} />
                                               </View>
                                               <Text style={styles.name}>{ item?.nickname }</Text>
                                               {
                                                   item.role == 2 && (
                                                       <View style={styles.tag}>
                                                           <Text style={styles.tagText}>成员</Text>
                                                       </View>
                                                   )
                                               }

                                               {
                                                   item.role == 3 && (
                                                       <View style={styles.tag}>
                                                           <Text style={styles.tagText}>管理员</Text>
                                                       </View>
                                                   )
                                               }

                                               {
                                                   item.role == 4 && (
                                                       <View style={styles.tag}>
                                                           <Text style={styles.tagText}>群主</Text>
                                                       </View>
                                                   )
                                               }

                                           </View>
                                       </TouchableOpacity>
                                   )
                               })
                           }

                           {
                               list?.length <= 0 && (
                                   <Empty/>
                               )
                           }

                       </View>
                   )
               }
               {
                   isApply && (
                       <View style={styles.memberList}>
                           {
                               list?.map((item: any, index: any) => {
                                   return (
                                       <TouchableOpacity key={index} onPress={() => show(item?.uid, communityId, item?.isMe)}>
                                           <View style={styles.memberItem}>
                                               <View style={styles.avator}>
                                                   <Image source={{ uri: item?.avatarUrl }} style={{ width: "100%", height: "100%" }} />
                                               </View>
                                               <View style={styles.memberBody}>
                                                   <View>
                                                       <Text>{ item?.nickname }</Text>
                                                   </View>
                                               </View>
                                               {
                                                   item?.isMe == 0 && item?.isExchange == 0 && (
                                                       <TouchableOpacity onPress={() => wrapCard(item?.uid)}>
                                                           <View style={styles.supway}>
                                                               <Text style={styles.supwayText}>交换</Text>
                                                           </View>
                                                       </TouchableOpacity>
                                                   )
                                               }
                                               {
                                                   item?.isMe == 0 && item?.isExchange == 1 && (
                                                       <TouchableOpacity>
                                                           <View style={styles.enableSupway}>
                                                               <Text style={styles.enableSupwayText}>已交换</Text>
                                                           </View>
                                                       </TouchableOpacity>
                                                   )
                                               }

                                               {
                                                   item?.isMe == 1 && (
                                                       <TouchableOpacity>
                                                           <View style={styles.editSupway}>
                                                               <Text style={styles.editSupwayText}>编辑</Text>
                                                           </View>
                                                       </TouchableOpacity>
                                                   )
                                               }
                                           </View>
                                       </TouchableOpacity>
                                   )
                               })
                           }

                           {
                               list?.length <= 0 && (
                                   <Empty/>
                               )
                           }
                       </View>
                   )
               }
           </ScrollView>
        </View>
    )
};

const styles = StyleSheet.create({
    avator: {
        width: 56,
        height: 56,
        borderRadius: 50,
        overflow: "hidden",
    },
    memberList: {
        paddingHorizontal: 12,
        marginTop: 12,
    },
    memberItem: {
        flexDirection: 'row',
        alignItems: "center",
        marginBottom: 20,
    },
    name: {
        color: "#3D3D3D",
        marginLeft: 10,
    },
    tag: {
        paddingVertical: 3,
        paddingHorizontal: 5,
        backgroundColor: "rgba(255,70,0, 0.1)",
        marginLeft: 4,
    },
    tagText: {
        fontSize: 8,
        color: "#EC6138"
    },
    memberBody: {
        marginLeft: 10,
        flex: 1,
    },
    memberBodyContent: {
        marginTop: 4,
    },
    memberBodyContentText: {
        color: "#9C9EAC",
        fontSize: 12,
    },
    supway: {
        backgroundColor: "#EC6138",
        borderRadius: 13,
        paddingHorizontal: 12,
        paddingVertical: 6,
        marginLeft: 12,
    },
    supwayText: {
        color: "#fff",
        fontSize: 12,
    },
    enableSupway: {
        borderWidth: 1,
        borderColor: "#D8D8D8",
        borderRadius: 13,
        paddingHorizontal: 12,
        paddingVertical: 6,
        marginLeft: 12,
    },
    enableSupwayText: {
        color: "#9C9EAC",
        fontSize: 12,
    },
    editSupway: {
        borderWidth: 1,
        borderColor: "#EC6138",
        borderRadius: 13,
        paddingHorizontal: 12,
        paddingVertical: 6,
        marginLeft: 12,
    },
    editSupwayText: {
        color: "#EC6138",
        fontSize: 12,
    },
});

export default memberComponent;
